<style lang="scss" scoped>
    .mint-header.is-fixed {
        z-index: 9999;
        font-size: .24rem;
    }
    .mint-header-button.is-left {
        line-height: .9rem;
        .mint-button-icon, .mint-button-text {
            height: 100%;
        }
    }
    .store-name {
        display: inline-block;
        vertical-align: middle;
        font-size: .24rem;
        width: 2rem;
        white-space: nowrap;
        overflow: hidden;
        background: linear-gradient(to right, #fff 70%, transparent 100%);
        background: -webkit-linear-gradient(left, rgb(255, 255, 255) 70%, transparent 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .mintui-arrow-down {
        font-size: .14rem;
    }
    .blackbord {
        position: relative;
        height: 100%;
        min-height: 10rem;
        .blackbord-items {
            position: relative;
            float: left;
            width: 45.2%;
            height: 3.2rem;
            color: #fff;
            margin-top: .24rem;
            margin-left: .24rem;
            border-radius: .1rem;
            box-shadow: 0 0 .18rem rgba(160,160,160,0.4);
            background-repeat: no-repeat;
            background-size: cover;
            &:nth-child(1) {
                background-image: url('~assets/img/blackbord1.png');
            }
            &:nth-child(2) {
                background-image: url('~assets/img/blackbord2.png');
            }
            &:nth-child(3) {
                background-image: url('~assets/img/blackbord3.png');
            }
            &:nth-child(4) {
                background-image: url('~assets/img/blackbord4.png');
            }
            .title {
                position: relative;
                top: .23rem;
                left: .23rem;
                font-size: .28rem;
            }
            .count {
                position: absolute;
                top: 1.43rem;
                left: 1.81rem;
                font-size: .6rem;
                span {
                    font-size: .24rem;
                }
            }
        }
    }
    .tech-logo {
        position: absolute;
        bottom: .8rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.9rem;
        height: 1.6rem;
        background: url('~assets/img/home-logo.png')no-repeat;
        background-position: 0 0;
        background-size: cover;
    }
    .mohu {
        filter: blur(3px);
        -webkit-filter: blur(3px);
    }
</style>

<template>
    <div class="page-wrapper">
        <mt-header fixed>
            <mt-button icon="location" slot="left" @click="choseStoreModal.visible = true;dropDownNav.visible = false">
                <div class="store-name">杭州菲力伟西溪风情店</div>
                <i class="mintui-arrow-down"></i>
            </mt-button>
            <mt-button :icon="dropDownNav.visible ? 'close' :'menu'" slot="right" @click="dropDownNav.visible = !dropDownNav.visible"></mt-button>
        </mt-header>
        <div :class="['blackbord', dropDownNav.visible ? 'mohu' : '']">
            <router-link to="/pool-info" class="blackbord-items">
                <span class="title">泳池信息</span>
                <div class="count">36<span>人</span></div>
            </router-link>
            <router-link to="/lifeguard" class="blackbord-items">
                <span class="title">救生员信息</span>
                <div class="count">6<span>人</span></div>
            </router-link>
            <router-link to="/alarm" class="blackbord-items">
                <span class="title">危险提醒</span>
                <div class="count">18<span>次</span></div>
            </router-link>
            <router-link to="/alarm/resolved" class="blackbord-items">
                <span class="title">已处理</span>
                <div class="count">16<span>次</span></div>
            </router-link>
            <div class="tech-logo"></div>
        </div>
        <ChoseStoreModal 
            @select="selectStore" 
            v-model="choseStoreModal.visible">
        </ChoseStoreModal>
        <DropDownNav v-model="dropDownNav.visible"></DropDownNav>
    </div>
</template>

<script>
    import { Indicator } from 'mint-ui'
    import ChoseStoreModal from './ChoseStoreModal.vue'
    import DropDownNav from './DropDownNav.vue'

    export default {
        components: {
            ChoseStoreModal,
            DropDownNav
        },
        activated() {
            this.$http.get('/api/device/index').then(res => {
                console.log(res.data)
            }).catch(err => {

            })
        },
        data() {
            return {
                choseStoreModal: {
                    visible: false,
                    storeList: []
                },
                dropDownNav: {
                    visible: false,
                    menuList: []
                }
            }
        },
        beforeRouteEnter(to, from, next) {         
            next(vm => {
                if(from.path == '/login') {
                    Indicator.open({
                        text: '加载中...',
                        spinnerType: 'snake'
                    })
                    setTimeout(() => {
                        vm.choseStoreModal.visible = true
                        Indicator.close()
                    }, 1000)
                }
            })
        },
        deactivated() {
            this.dropDownNav.visible = false
            this.choseStoreModal.visible = false
        },
        methods: {
            selectStore(value) {

            }
        }
    }
</script>

